<template>
  <div class="table-view">

      <!-- 按钮区域 -->
      <el-row
        type="flex"
        class="row-bg button-tab"
        justify="space-between">
        <el-row>
          <el-button type="primary" @click="addRoles">添加角色</el-button>
        </el-row>
        <el-input
          v-model="input"
          suffix-icon="el-icon-search"
          placeholder="请输入内容"
          class="search-input">
        </el-input>
      </el-row>

      <!-- 表单区域 -->
      <el-table
        style="width: 100%"
        height="580px"
        :data="pop.tableData"
        @selection-change="handleSelectionChange">

        <!-- 角色名 -->
        <el-table-column
          prop="address"
          label="角色名">
        </el-table-column>

        <!-- 权限 -->
        <el-table-column
          prop="address"
          label="权限">
        </el-table-column>

        <!-- 创建者 -->
        <el-table-column
          prop="address"
          label="系统名称">
        </el-table-column>

        <!-- 操作 -->
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleDelete(scope.$index)"
              type="text" size="medium"
              style="font-weight: 400">
              删除
            </el-button>
            <span class="line">|</span>
            <el-button
              @click="modifyClick(scope.row)"
              type="text" size="medium"
              style="font-weight: 400">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加用户 -->
      <el-dialog
        title="添加角色"
        :visible.sync="dialogVisible"
        width="90%">
        <add-role v-if="dialogVisible"/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>
<script>
import AddRole from './AddRole'
export default {
  name: 'roleTableView',
  props: {
    data:{
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pop: {
        tableData: this.data,
      },
      input: '',
      dialogVisible: false,
      multipleSelection: [],
    }
  },
  components: {
    AddRole,
  },
  methods: {
    handleDelete( index ) {
      /* 删除 */
      console.log(index)
    },
    modifyClick( index ) {
      /* 修改 */
      this.dialogVisible = true
      console.log(index)
    },
    handleSelectionChange(val) {
      /* 复选框事件 */
      this.multipleSelection = val
    },
    addRoles() {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() =>{
          done()
        })
        .catch( () => {})
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~styles/default/table_view';
</style>